<template>
  <!-- 这里是个人信息 -->
  <div class="personInfo_wrap">
    <!-- 标题 -->
    <div class="docCon_title">
      <h2>
        <span>个人信息</span>
      </h2>
    </div>
    <!-- 内容 -->
    <div class="docCon_main">
      <!-- 一, 病历夹 -->
      <div class="medicalDetail_title">
        <div class="medicalDetail_title_left">我的信息</div>
        <div class="medicalDetail_title_right">
          <div class="medicalDetail_editDiv fr" v-show="isEidt" @click="satarEdit">
            <i class="fa fa-pencil"></i>&nbsp;修改信息
          </div>
        </div>
      </div>
      <!-- 二, 病历内容 -->
      <div class="medicalDetail_content">
        <form class="medicalDetail_content_form" action="###" method="get">
          <!-- 左 -->
          <div class="medicalDetail_con_side">
            <div class="detail_con_left_side_row">
              <p>医生名称</p>
              <input class="detail_inp10" type="text" value="张某某" :disabled="isEidt" />
            </div>
            <div class="detail_con_left_side_row detail_side_doubuleCol">
              <div>
                <p>性别</p>
                <input
                  class="detail_inp8"
                  type="text"
                  value="男"
                  list="genderlist"
                  :disabled="isEidt"
                />
                <!-- <datalist id="genderlist">
									<option value="男">男</option>
									<option value="女">女</option>
                </datalist>-->
              </div>
              <div></div>
            </div>
            <div class="detail_con_left_side_row">
              <p>出生日期</p>
              <div class="detail_side_doubuleCol">
                <input class="detail_inp8" type="text" value="1988" :disabled="isEidt" />
                <span>年</span>
                <input class="detail_inp8" type="text" value="9" :disabled="isEidt" />
                <span>月</span>
              </div>
            </div>
            <div class="detail_con_left_side_row">
              <p>联系电话</p>
              <input class="detail_inp10" type="text" value="166 1777 8888" :disabled="isEidt" />
            </div>
            <div class="detail_con_left_side_row">
              <p>地址</p>
              <input class="detail_inp10" type="text" value="河南省郑州市中原区" :disabled="isEidt" />
            </div>
          </div>
          <!-- 中 -->
          <div class="medicalDetail_con_mid">
            <div class="detail_con_left_side_row">
              <p>就职医院</p>
              <input class="detail_inp10" type="text" value="河南省人民医院" :disabled="isEidt" />
            </div>
            <div class="detail_con_left_side_row detail_side_doubuleCol">
              <div>
                <p>医院级别</p>
                <input
                  class="detail_inp8"
                  type="text"
                  value="三甲"
                  list="genderlist"
                  :disabled="isEidt"
                />
                <!-- <datalist id="genderlist">
									<option value="男">男</option>
									<option value="女">女</option>
                </datalist>-->
              </div>
              <div></div>
            </div>
            <div class="detail_con_left_side_row">
              <p>医院地址</p>
              <div class="detail_side_doubuleCol">
                <input class="detail_inp8" type="text" value="河南" :disabled="isEidt" />
                <span>省</span>
                <input class="detail_inp8" type="text" value="郑州" :disabled="isEidt" />
                <span>市</span>
              </div>
            </div>
            <div class="detail_con_left_side_row">
              <p>所属科室</p>
              <input class="detail_inp10" type="text" value="外科" :disabled="isEidt" />
            </div>
            <div class="detail_con_left_side_row">
              <p style="color: red;">医院地址</p>
              <input class="detail_inp10" type="text" value="河南省郑州市中原区" :disabled="isEidt" />
            </div>
          </div>
          <!-- 右 -->
          <div class="medicalDetail_con_side">
            <div class="detail_con_right_side_row">
              <p>医生简介</p>
              <textarea class="detail_inp10 diseaseTextarea" :disabled="isEidt">添加简介......</textarea>
            </div>
            <div class="detail_con_right_side_row">
              <p>工作经历</p>
              <textarea class="detail_inp10 diseaseTextarea" :disabled="isEidt">添加简介......</textarea>
            </div>
            <div class="detail_con_right_side_row">
              <p>相关证明上传</p>
              <div class="detail_upload_wrap detail_inp10 diseaseTextarea">
                <input class="detail_upload" type="file" :disabled="isEidt" />
              </div>
            </div>
          </div>
          <!-- 下 -->
          <div v-show="!isEidt" class="medicalDetail_con_bot">
            <input class="detail_save sureBtnHover" type="button" value="保存" @click="saveMedical" />
            <input
              class="detail_cancle cancleBtnHover"
              type="button"
              value="取消"
              @click="isEidt=!isEidt"
            />
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "EMedicalDetail",
  data() {
    return {
      isEidt: true // 是否编辑
    };
  },
  computed: {
    emedical() {
      return this.$store.state.emedicalID;
    }
  },
  methods: {
    satarEdit: function() {
      this.isEidt = !this.isEidt;
    },
    saveMedical: function() {
      alert("要保存信息的");
      // 显示修改按钮, 保存和取消按钮隐藏
      this.isEidt = !this.isEidt;
    }
  }
};
</script>
<style scoped>
/* 病历详情/添加病历页面的样式 */
@import url("../../css/EMedicalDetail.css");
.personInfo_wrap {
  height: 100%;
}

/* 相关证明上传 */
.personInfo_wrap .detail_upload_wrap {
  background: url(../../assets/doctor/doctor_uploadBG.png) no-repeat center;
  background-size: 100%;
}
</style>